<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>
      <img src="@/assets/城市.jpg" alt="" width="100%">
    </swiper-slide>
     <swiper-slide>
      <img src="@/assets/森林.jpg" alt="" width="100%">
    </swiper-slide>
     <swiper-slide>
      <img src="@/assets/山丘.jpg" alt="" width="100%">
    </swiper-slide>
     <swiper-slide>
      <img src="@/assets/艺术.jpg" alt="" width="100%">
    </swiper-slide>
  <!-- 轮播点 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      // 配置信息
      swiperOptions: {
        // 分页
        pagination: {
          el: ".swiper-pagination",
        },
        // 自动轮播
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
    };
  },
};
</script>

<style></style>
